<template>
  <div class="app">
    <div class="title">今日推荐</div>

    <van-grid :column-num="3">
      <van-grid-item v-for="item in HotList" :key="item.id">
        <van-image
          width="100%"
          :src="item.picUrl"
        />
        <span class="recommendImgIcon">
                  <van-icon color="#fff" name="service-o" class="icon"/>
                  <span>{{ (item.playCount / 10000).toFixed(1) }}w</span></span>
        <span class="text">{{ item.name }}</span>
      </van-grid-item>

    </van-grid>

    <div class="title">最新音乐</div>

    <ceil v-for="item in newSongsList"
          :key="item.id"
          :name="item.name"
          :authorName='item.song.artists[0].name'
          :id="item.id"
    >

    </ceil>
  </div>
</template>

<script>
import { getRecommendList, getNewSongList } from '@/api/recommend'
import ceil from '@/components/ceil'

export default {
  name: 'Home',
  data () {
    return {
      HotList: [],
      newSongsList: []
    }
  },
  components: {
    ceil
  },
  created () {
    this.getHotList()
    this.getNewSongsList()
  },
  methods: {
    async getHotList () {
      const res = await getRecommendList({
        limit: 6
      })
      this.HotList = res.data.result
    },
    async getNewSongsList () {
      const res = await getNewSongList({
        limit: 20
      })
      this.newSongsList = res.data.result
    }
  }

}
</script>

<style scoped>
.text {
  font-size: 13px;
}

.icon {
  margin: 2px 0;
}

.recommendImgIcon {
  font-size: 12px;
  position: absolute;
  right: 8px;
  top: 20px;
  color: #fff;
}

.van-col {
  position: relative;
  margin: 10px 0;
}

.app {
  padding: 0 0 50px;
}

</style>
